<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Swiper demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

    <!-- Link Swiper's CSS -->
    <link rel="stylesheet" href="./css/index/index.css">
    <link rel="stylesheet" href="./css/swiper.min.css">
    <link rel="stylesheet" href="./css/css.css">
    <link rel="stylesheet" href="../dist/css/swiper.min.css">
    <script src="./js/swiper.min.js"></script>
    <script src="./js/jquery-3.6.4.min.js"></script>
    <!-- Demo styles -->
    <style>
        * {
            padding: 0;
            margin: 0;
            text-decoration: none;
        }

        #box {
            background: #f3f3f3;
            width: 100%;
            overflow: hidden;
        }

        .swiper-container {
            width: 100%;
            height: 100%;
        }

        .swiper-container .swiper-wrapper {
            width: 100%;
            height: 100%;
        }

        .swiper-container .swiper-wrapper .swiper-slide {
            width: 100%;
            height: 100%;
        }

        .swiper-container .swiper-wrapper .swiper-slide img {
            width: 100%;
            height: 100%;
        }

        .top {
            position: relative;
        }

        .caidan {
            display: flex;
            width: 100%;
            justify-content: space-between;
            background: linear-gradient(to right, #660103 0%, #9a0a06 50%, #660103 100%);
            margin-right: 100px;
        }

        .beijin img {
            width: 100%;
        }

        .ma {
            width: 25%;
        }

        .ma img {
            width: 100%;
            /* height: 100%; */
        }


        .xuanxiang {
            width: 45%;

        }

        .xuanxiang1 {
            width: 100%;
            display: flex;
            list-style: none;

        }

        .xuanxiang1 li {
            font-size: 12px;
            margin: 0 auto;
        }

        a {
            color: red;
        }

        input {
            border-radius: 10px;
            border: none;
            line-height: 20px;
            position: absolute;
            top: 18px;
            text-align: center;
        }

        .shos {
            width: 25%;
            position: relative;
        }

        .shos1 img {
            width: 25px;
            position: absolute;
            top: 16px;
        }

        /* 1 */
        .xinwen {
            margin: 20px 0 20px 0;
        }

        .xinwen1 {
            text-align: center;
            position: relative;
        }

        .xingw {
            font-size: 23px;
            background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #ddd),
                    color-stop(0.15, #ddd),
                    color-stop(1, #000),
                    color-stop(0.5, #ccc));
            color: transparent;
            -webkit-background-clip: text;
            -moz-background-clip: text;
            -moz-background-clip: text;
            font-weight: bold;
        }

        .xingw1 {
            position: absolute;
            left: 45%;
            bottom: -2px;
            color: #c90000;
            font-weight: bold;
            font-size: 30px;
        }

        .dang {
            width: 80%;
            margin: 0 auto;
        }

        .dang0 {
            display: flex;
            justify-content: space-between;

        }

        .dang1 {
            width: 49%;

        }

        .dang2 {
            width: 49%;
        }

        .swiper-container {
            width: 100%;
            height: 100%;
        }

        .swiper-slide img {
            width: 100%;
            height: 100%;
        }

        .swiper-slide {
            font-size: 18px;
            background: #fff;
        }

        .dang2-1 {
            font-size: 26px;
            font-weight: bold;
            padding: 10px;
        }

        .dang2-1-1 {
            position: relative;
            margin-bottom: 20px;
            padding: 10px;
        }

        .dang2-1-3 {
            color: red;
            position: absolute;
            right: 30px;
            top: 13px;
            font-size: 15px;
            padding: 10px;
        }

        .dang2-2-1 {
            padding: 10px;
        }

        .da {
            margin: 20px 0 20px 0;
        }

        .da0 {
            display: flex;
            width: 100%;
            justify-content: space-between;
        }

        .da1 {
            width: 31%;
            padding: 5px;
            background: #ffffff;
        }

        .da1:hover span {
            font-size: 15px;
            color: red;
        }

        .da1-2 {
            word-wrap: break-word;
        }

        .da1-1 {
            margin-left: 200px;
        }

        .chakan {
            width: 100%;
        }

        .chakan2 {
            margin: 0 0 0 500px;

        }

        .chakan3 {
            display: flex;
        }

        .chakan div:nth-child(1) {
            color: #C0C0C0;
        }

        .chakan1 img {
            width: 18px;
            margin: 3px 0px 0px 5px;
        }

        /* 2 */
        .building {
            background-color: #fff;
            margin-top: 20px;
            padding: 20px;
        }

        .building1 {
            text-align: center;
            position: relative;
        }

        .building0 {
            width: 80%;
            margin: 0 auto;
        }

        .building1-1 {
            font-size: 23px;
            background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #ddd),
                    color-stop(0.15, #ddd),
                    color-stop(1, #000),
                    color-stop(0.5, #ccc));
            color: transparent;
            -webkit-background-clip: text;
            -moz-background-clip: text;
            -moz-background-clip: text;
            font-weight: bold;
        }

        .building1-2 {
            position: absolute;
            left: 45%;
            bottom: -2px;
            color: #c90000;
            font-weight: bold;
            font-size: 30px;
        }

        .building20 {
            display: flex;
            justify-content: space-between;
        }

        .building2 {
            /* width: 100%; */
            margin-top: 20px;
            width: 32%;
        }

        .building2-1 {
            display: flex;
        }

        .building2-1 img {
            width: 100%;
        }

        .building2-2 {
            display: flex;
            padding: 10px;
        }

        .building2-2-1 {
            background-color: #E47F7F;
            text-align: center;
            width: 120px;
            height: 55px;
            line-height: 25px;
            padding: 5px;
        }

        .building2-2-1 div:nth-child(1) {
            font-size: 15px;
            color: #fff;
        }

        .building2-2-1 div:nth-child(2) {
            font-size: 12px;
            color: #fff;
        }

        .building2-2-2 {
            margin-left: 10px;
        }

        .building2-2-2 span {
            font-size: 15px;
        }

        .building2-0 {
            height: 150px;
            box-shadow: 0px 0px 10px 5px #aaa;
        }

        .chakan {
            margin: 50px 0 20px 0;
        }

        .building5 {
            height: 20px;
            margin-top: 45px;
        }

        .building2:hover .building5 {
            background-color: #C90000;
        }

        /* 3 */
        .research {
            background-image: url(img/7.png);
            background-size: 100% 100%;
            height: 430px;
        }

        .research1 {
            width: 80%;
            margin: 0 auto;
        }

        .research2 {
            text-align: center;
            position: relative;
            padding: 10px;
        }

        .research2-1 {
            font-size: 23px;
            background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #ddd),
                    color-stop(0.15, #ddd),
                    color-stop(1, #000),
                    color-stop(0.5, #ccc));
            color: transparent;
            -webkit-background-clip: text;
            -moz-background-clip: text;
            -moz-background-clip: text;
            font-weight: bold;
        }

        .research2-2 {
            position: absolute;
            left: 45%;
            bottom: 6px;
            color: #c90000;
            font-weight: bold;
            font-size: 30px;
        }

        .research5 {
            display: flex;
            justify-content: space-between;
        }

        .research3 {
            width: 48%;
        }

        .research3-1 {
            position: relative;
        }

        .research3-1 img {
            width: 100%;
        }

        .research3-1-1 {
            background-color: rgb(0, 0, 0, 0.5);
            line-height: 40px;
            text-align: center;
            color: #fff;
            position: absolute;
            width: 100%;
            bottom: 1px;
        }

        .research4 {
            width: 48%;
            line-height: 50px;
        }

        .research4-1 {
            margin-bottom: 3px;
        }

        .research4-1 ul {
            display: flex;
            justify-content: space-between;
            border-bottom: 1px black solid;
        }

        .research4-1 ul li:nth-child(1) {
            font-size: 20px;
        }

        .research4-1 ul li:nth-child(2) {
            font-size: 15px;
            /* line-height: 30px; */
            list-style: none;
        }

        .research4-1:hover {
            color: red;
        }

        .research4-2 ul {
            display: flex;
            justify-content: space-between;
        }

        .research4-2 ul li:nth-child(1) {
            font-size: 20px;
        }

        .research4-2 ul li:nth-child(2) {
            font-size: 15px;
            /* line-height: 30px; */
            list-style: none;
        }

        .research4-2:hover {
            color: red;
        }

        /* 4 */
        .Society {
            background: #fff;
            height: 520px;
        }

        .Society1 {
            width: 80%;
            margin: 0 auto;
        }

        .Society2 {
            text-align: center;
            position: relative;
            padding: 40px;
        }

        .Society2-1 {
            font-size: 23px;
            background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #ddd),
                    color-stop(0.15, #ddd),
                    color-stop(1, #000),
                    color-stop(0.5, #ccc));
            color: transparent;
            -webkit-background-clip: text;
            -moz-background-clip: text;
            -moz-background-clip: text;
            font-weight: bold;
        }

        .Society2-2 {
            position: absolute;
            left: 45%;
            bottom: 37px;
            color: #c90000;
            font-weight: bold;
            font-size: 30px;
        }

        .Society5 {
            display: flex;
            justify-content: space-between;
        }

        .Society3 {
            width: 48%;
        }

        .Society3-1 {
            /* position: relative; */
        }

        .Society3-1 img {
            width: 100%;
            height: 200px;
        }

        .Society10 {
            padding: 10px;
            border: 1px red solid;
            border-top: none;
        }

        .Society3-1-1 {
            margin-bottom: 10px;
            font-size: 15px;
            font-weight: bold;
        }


        .Society3-1-2 {
            font-size: 12px;
            margin-bottom: 10px;
        }

        .Society3-1-3 {
            /* border: 1px salmon solid; */
        }

        .Society3-1-3-1 img {
            width: 15px;
            height: 15px;
        }

        .Society3-1-3-2 {
            font-size: 12px;

        }

        .Society4 {
            width: 48%;
        }

        .Society4-1 {
            padding: 20px;
            margin-bottom: 20px;
            height: 34%;
            box-shadow: 0px 0px 10px 5px #aaa;
        }

        .Society4-1-1 {
            display: flex;
            margin: 10px 0px 0px 40px;
            width: 40%;
        }

        .Society4-1-2 img {
            width: 80px;
        }

        .Society4-1-3 {
            font-size: 30px;
            color: #c80000;
            font-weight: bold;
            line-height: 90px;
            margin-left: 20px;
        }

        .Society4-2 {
            padding: 20px;
            height: 34%;
            box-shadow: 0px 0px 10px 5px #aaa;
        }

        .Society4-2-1 {
            display: flex;
            margin: 20px 0px 0 40px;
            width: 70%;
        }

        .Society4-2-2 img {
            width: 80px;
        }

        .Society4-2-3 {
            font-size: 30px;
            color: #c80000;
            font-weight: bold;
            line-height: 60px;
            margin-left: 20px;
            width: 100%;
        }

        .More {
            width: 100%;
            margin: 30px 0 20px 0;
        }

        .More2 {
            margin: 0 0 0 500px;

        }

        .More3 {
            display: flex;
        }

        .More div:nth-child(1) {
            color: #C0C0C0;
        }

        .More1 img {
            width: 18px;
            margin: 3px 0px 0px 5px;
        }

        /* 6 */
        .Theme {
            background-color: #F7E4E6;
            height: 450px;
        }

        .Theme1 {
            width: 80%;
            margin: 0 auto;
        }

        .Theme2 {
            text-align: center;
            position: relative;
            padding: 40px;
        }

        .Theme2-1 {
            font-size: 23px;
            background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #ddd),
                    color-stop(0.15, #ddd),
                    color-stop(1, #000),
                    color-stop(0.5, #ccc));
            color: transparent;
            -webkit-background-clip: text;
            -moz-background-clip: text;
            -moz-background-clip: text;
            font-weight: bold;
        }

        .Theme2-2 {
            position: absolute;
            left: 45%;
            bottom: 37px;
            color: #c90000;
            font-weight: bold;
            font-size: 30px;
        }
        .Theme10{
            display: flex;
            justify-content: space-between;
        }
        .Theme3 {
            width: 23%;
            position: relative;
            border-radius: 10px;
        }

        .Theme3-1-1 img {
            width: 100%;
        }
        .Theme3-1-2{
            color: #fff;
            position: absolute;
            top: 80px;
            left: 40px;
            font-weight: bold;
            text-align: center;
        }
        .Theme3-2{
            padding: 20px;
            background-color: #fff;
            border-radius: 0px 0px 10px 10px;
            height: 50px;
        }
        .Theme3-2-1{
            font-size: 13px;
        }
        .Theme10 .Theme3:hover{
           position: relative;
           top: -20px;
        }
        .Theme3 .Theme3-1:hover{
            background-color: #A7C5E1;
            border-radius: 10px 10px 0px 0px;
        }
        .Theme4 {
            width: 100%;
            margin: 30px 0 20px 0;
        }

        .Theme5 {
            margin: 0 0 0 500px;

        }

        .Theme6 {
            display: flex;
        }

        .Theme4 div:nth-child(1) {
            color: #C0C0C0;
        }

        .Theme7 img {
            width: 18px;
            margin: 3px 0px 0px 5px;
        }
        /* 8 */
        .Grace {
            height: 450px;
        }

        .Grace1 {
            width: 80%;
            margin: 0 auto;
        }

        .Grace2 {
            text-align: center;
            position: relative;
            padding: 40px;
        }
        .Grace2-1 {
            font-size: 23px;
            background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #ddd),
                    color-stop(0.15, #ddd),
                    color-stop(1, #000),
                    color-stop(0.5, #ccc));
            color: transparent;
            -webkit-background-clip: text;
            -moz-background-clip: text;
            -moz-background-clip: text;
            font-weight: bold;
        }

        .Grace2-2 {
            position: absolute;
            left: 45%;
            bottom: 37px;
            color: #c90000;
            font-weight: bold;
            font-size: 30px;
        }
        .Grace3{
        }
        .swiper-container1 {
        
        height: 200px;
        margin: 20px auto;
    }
    .swiper-container1 .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;
        width: 10%;

        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }
    .swiper-container1 .swiper-slide:nth-child(2n) {
        width: 40%;
    }
    .swiper-container1 .swiper-slide:nth-child(3n) {
        width: 20%;
    }
    .Grace4{
        width: 80%;
        margin: 0 auto;
    }
    .Grace4-1{
        list-style: none;
        display: flex;
        justify-content: space-between;
       
    }
    .Grace4-1-1{
        font-size: 20px;
        font-weight: bold;
    }
    .Grace4-1 a{
        color: #000;
    }
    .Grace4-1-2{
        line-height: 30px;
        font-size: 14px;
    }
    /* 9 */
    .bottom{
        width: 100%;
        border: 1px saddlebrown solid;
        background-color: #D23132;
    }
    .bottom1{
        width: 80%;
        margin: 0 auto;
        background-color: #D23132;
        display: flex;
        justify-content: space-between;
        padding: 30px;
        position: relative;
    }
    .bottom1-1{
        width: 33%;
        height: 70px;
        margin-top: 30px;
    }
    .bottom1-1 img{
        width: 100%;
    }
    .bottom1-2{
        width: 50%;
        color: #fff;
        line-height: 130px;
    }
    .bottom1-4{
        border-right: 1px solid snow;
        width: 10px;
        height: 50px;
        position: absolute;
        left: 365px;
        top: 70px;
    }
    </style>
</head>

<body>
    <div id="box">
        <div class="top">
            <div class="top1">
                <div class="caidan">
                    <div class="ma"><img src="./img/2.png" alt="" /></div>
                    <div class="xuanxiang">
                        <br>
                        <ul class="xuanxiang1">
                            <li><a href="首页.html">首页</a></li>
                            <li><a href="部门概况.html">部门概况</a></li>
                            <li><a href="">师资队伍</a></li>
                            <li><a href="">思政建设</a></li>
                            <li><a href="">红馆</a></li>
                            <li><a href="">心理健康教育中心</a></li>
                            <li><a href="">教学科研</a></li>
                            <li><a href="">学生社团</a></li>
                        </ul>
                    </div>
                    <div class="shos">
                        <div>
                            <input type="text" placeholder="请输入关键词搜索">
                            <div class="shos1"><img src="img/搜索.png" alt=""></div>
                            <div>
                                <i></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="swiper-container">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><img src="img/1.png" alt=""></div>
                    <div class="swiper-slide"><img src="img/1.png" alt=""></div>
                    <div class="swiper-slide"><img src="img/1.png" alt=""></div>
                    <div class="swiper-slide"><img src="img/1.png" alt=""></div>
                    <div class="swiper-slide"><img src="img/1.png" alt=""></div>
                    <div class="swiper-slide"><img src="img/1.png" alt=""></div>
                    <div class="swiper-slide"><img src="img/1.png" alt=""></div>
                    <div class="swiper-slide"><img src="img/1.png" alt=""></div>
                    <div class="swiper-slide"><img src="img/1.png" alt=""></div>
                    <div class="swiper-slide"><img src="img/1.png" alt=""></div>
                </div>
                <!-- Add Pagination -->
                <div class="swiper-pagination"></div>
            </div>
            <!--1 -->
        </div>
        <div class="xinwen">
            <div class="xinwen1">
                <span class="xingw">XIN XCWDSXG GAO</span>
                <span class="xingw1">新闻公告</span>
            </div>
        </div>
        <div class="dang">
            <div class="dang0">
                <div class="dang1">
                    <div class="swiper-container">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide"><img src="img/3.png" alt=""></div>
                            <div class="swiper-slide"><img src="img/5.png" alt=""></div>
                            <div class="swiper-slide"><img src="img/10.png" alt=""></div>
                        </div>
                    </div>

                </div>
                <div class="dang2">
                    <div class="swiper-container">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <div class="dang2-1">"为党育人 为国育才-9位法大教师倾情讲述育人故事"</div>
                                <div class="dang2-1-1">
                                    <div class="dang2-1-2">___________________________________________</div>
                                    <div class="dang2-1-3">2022-11-02</div>
                                </div>
                                <div class="dang2-2-1">
                                    <div>三尺讲台育英才，一方舞台展风采。“课比天大，是一幅字、一
                                        块匾，是心照不宣的默契三尺讲台育英才，一方舞台展风采课比
                                        天大，是一幅字、一块匾，是心照不宣的默契!…</div>
                                </div>
                            </div>
                            <div class="swiper-slide">Slide 2</div>
                            <div class="swiper-slide">Slide 3</div>
                        </div>
                        <!-- Add Pagination -->
                        <div class="swiper-pagination"></div>
                        <!-- Add Arrows -->
                        <div class="swiper-button-next"></div>
                        <div class="swiper-button-prev"></div>
                    </div>

                </div>
            </div>

            <div class="da">
                <div class="da0">
                    <div class="da1">
                        <div><span>'为党育人 为国育才”一9位法大教师倾情讲述育三尺讲台育英才,一方舞台展风采。"课比天大，是一幅字-块匾，是心照不宣的默契三尺讲台育英才.</span></div>
                        <div class="da1-1"><span>2022-11-02</span></div>
                    </div>
                    <div class="da1">
                        <div class="da1-2"><span>'为党育人
                                为国育才”一9位法大教师倾情讲述育三尺讲台育英才,一方舞台展风采。"课比天大，是一幅字-块匾，是心照不宣的默契三尺讲台育英才.</span></div>
                        <div class="da1-1"><span>2022-11-02</span></div>
                    </div>
                    <div class="da1">
                        <div><span>'为党育人 为国育才”一9位法大教师倾情讲述育三尺讲台育英才,一方舞台展风采。"课比天大，是一幅字-块匾，是心照不宣的默契三尺讲台育英才.</span></div>
                        <div class="da1-1"><span>2022-11-02</span></div>
                    </div>
                </div>
            </div>
            <div class="chakan">
                <div class="chakan2">
                    <a href="#" class="chakan3">
                        <div>查看更多</div>
                        <div class="chakan1"><img src="img/111.png" alt=""></div>
                    </a>

                </div>

            </div>
        </div>
        <div class="building">
            <div class="building0">
                <div class="building1">
                    <span class="building1-1">XIN XCWDSXG GAO</span>
                    <span class="building1-2">党建引领</span>
                </div>
                <div class="building20">
                    <div class="building2">
                        <div class="building2-1">
                            <img src="img/5.png" alt="">
                        </div>
                        <div class="building2-0">
                            <div class="building2-2">
                                <div class="building2-2-1">
                                    <div>02</div>
                                    <div>2002-11</div>
                                </div>
                                <div class="building2-2-2">
                                    <span>关于举办第二届(2022年)烟台市乡村
                                        面艺关于举办第二届(2022年)烟台市
                                        乡村面艺.</span>
                                </div>
                            </div>
                            <div class="building5"></div>
                        </div>

                    </div>
                    <div class="building2">
                        <div class="building2-1">
                            <img src="img/5.png" alt="">
                        </div>
                        <div class="building2-0">
                            <div class="building2-2">
                                <div class="building2-2-1">
                                    <div>02</div>
                                    <div>2002-11</div>
                                </div>
                                <div class="building2-2-2">
                                    <span>关于举办第二届(2022年)烟台市乡村
                                        面艺关于举办第二届(2022年)烟台市
                                        乡村面艺.</span>
                                </div>
                            </div>
                            <div class="building5"></div>
                        </div>

                    </div>
                    <div class="building2">
                        <div class="building2-1">
                            <img src="img/5.png" alt="">
                        </div>
                        <div class="building2-0">
                            <div class="building2-2">
                                <div class="building2-2-1">
                                    <div>02</div>
                                    <div>2002-11</div>
                                </div>
                                <div class="building2-2-2">
                                    <span>关于举办第二届(2022年)烟台市乡村
                                        面艺关于举办第二届(2022年)烟台市
                                        乡村面艺.</span>
                                </div>
                            </div>
                            <div class="building5"></div>
                        </div>

                    </div>
                </div>
                <div class="chakan">
                    <div class="chakan2">
                        <a href="#" class="chakan3">
                            <div>查看更多</div>
                            <div class="chakan1"><img src="img/111.png" alt=""></div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <!-- 3 -->
        <div class="research">
            <div class="research1">
                <div class="research2">
                    <span class="research2-1">XIN XCWDSXG GAO</span>
                    <span class="research2-2">教研动态</span>
                </div>
                <div class="research5">
                    <div class="research3">
                        <div class="research3-1">
                            <div><img src="img/6.png" alt=""></div>
                            <div class="research3-1-1">"为党育人 为国育才"</div>
                        </div>
                    </div>
                    <div class="research4">
                        <div class="research4-1">
                            <ul>
                                <li>"为党育人 为国育才"</li>
                                <li>2022-11-02</li>
                            </ul>
                        </div>
                        <div class="research4-1">
                            <ul>
                                <li>"为党育人 为国育才"</li>
                                <li>2022-11-02</li>
                            </ul>
                        </div>
                        <div class="research4-1">
                            <ul>
                                <li>"为党育人 为国育才"</li>
                                <li>2022-11-02</li>
                            </ul>
                        </div>
                        <div class="research4-1">
                            <ul>
                                <li>"为党育人 为国育才"</li>
                                <li>2022-11-02</li>
                            </ul>
                        </div>
                        <div class="research4-2">
                            <ul>
                                <li>"为党育人 为国育才"</li>
                                <li>2022-11-02</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="chakan">
                    <div class="chakan2">
                        <a href="#" class="chakan3">
                            <div>查看更多</div>
                            <div class="chakan1"><img src="img/111.png" alt=""></div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="Society">
            <div class="Society1">
                <div class="Society2">
                    <span class="Society2-1">XIN XCWDSXG GAO</span>
                    <span class="Society2-2">社会服务</span>
                </div>
                <div class="Society5">
                    <div class="Society3">
                        <div class="Society3-1">
                            <div><img src="img/10.png" alt=""></div>
                            <div class="Society10">
                                <div class="Society3-1-1">形势与政策报告会之“新东欧地缘政治冲突及...</div>
                                <div class="Society3-1-2">
                                    形势与政策报告会之“新东欧地缘政治冲突及形势与政策报告会之“新东欧地缘\政治冲突及形势与政策报告会之“新东欧地缘政治冲突及......</div>
                                <div class="Society3-1-3">
                                    <span class="Society3-1-3-1"><img src="img/11.png" alt=""></span>
                                    <span class="Society3-1-3-2">2022-9-29</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="Society4">
                        <div class="Society4-1">
                            <div class="Society4-1-1">
                                <div class="Society4-1-2"><img src="img/8.png" alt=""></div>
                                <div class="Society4-1-3">红馆</div>
                            </div>
                        </div>
                        <div class="Society4-2">
                            <div class="Society4-2-1">
                                <div class="Society4-2-2"><img src="img/9.png" alt=""></div>
                                <div class="Society4-2-3">心理健康中心</div>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="More">
                    <div class="More2">
                        <a href="#" class="More3">
                            <div>查看更多</div>
                            <div class="More1"><img src="img/111.png" alt=""></div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="Theme">
            <div class="Theme1">
                <div class="Theme2">
                    <span class="Theme2-1">XIN XCWDSXG GAO</span>
                    <span class="Theme2-2">主题活动</span>
                </div>
                <div class="Theme10">
                    <div class="Theme3">
                        <div class="Theme3-1">
                            <div class="Theme3-1-1"><img src="img/12.png" alt=""></div>
                            <div class="Theme3-1-2">山东城院"五心工程"<br />温暖校园</div>
                        </div>
                        <div class="Theme3-2">
                            <div class="Theme3-2-1">3月24日,一场别开生面的“平台通过网络直播的形式拉开序幕...</div>
                        </div>
                    </div>
                    <div class="Theme3">
                        <div class="Theme3-1">
                            <div class="Theme3-1-1"><img src="img/13.png" alt=""></div>
                            <div class="Theme3-1-2">划重点！一图读懂山东<br />城府“十四五”发<br/>展发展</div>
                        </div>
                        <div class="Theme3-2">
                            <div class="Theme3-2-1">3月20日下午,烟台市高新区管委副主任李如鹏.市教育局高新分局...</div>
                        </div>
                    </div>
                    <div class="Theme3">
                        <div class="Theme3-1">
                            <div class="Theme3-1-1"><img src="img/13.png" alt=""></div>
                            <div class="Theme3-1-2">划重点！一图读懂山东<br />城府“十四五”发<br/>展发展</div>
                        </div>
                        <div class="Theme3-2">
                            <div class="Theme3-2-1">3月20日下午,烟台市高新区管委副主任李如鹏.市教育局高新分局...</div>
                        </div>
                    </div>
                    <div class="Theme3">
                        <div class="Theme3-1">
                            <div class="Theme3-1-1"><img src="img/13.png" alt=""></div>
                            <div class="Theme3-1-2">划重点！一图读懂山东<br />城府“十四五”发<br/>展发展</div>
                        </div>
                        <div class="Theme3-2">
                            <div class="Theme3-2-1">3月20日下午,烟台市高新区管委副主任李如鹏.市教育局高新分局...</div>
                        </div>
                    </div>
                </div>
                <div class="Theme4">
                    <div class="Theme5">
                        <a href="#" class="Theme6">
                            <div>查看更多</div>
                            <div class="Theme7"><img src="img/111.png" alt=""></div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="Grace">
            <div class="Grace1">
                <div class="Grace2">
                    <span class="Grace2-1">XIN XCWDSXG GAO</span>
                    <span class="Grace2-2">马院风采</span>
                </div>
            </div>
            <div class="Grace3">
                <div class="swiper-container1">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide"><img src="img/微信图片_20221118153337.jpg" alt=""></div>
                        <div class="swiper-slide"><img src="img/微信图片_202211181533371.jpg" alt=""></div>
                        <div class="swiper-slide"><img src="img/微信图片_202211181533372.jpg" alt=""></div>
                        <div class="swiper-slide"><img src="img/微信图片_202211181533373.jpg" alt=""></div>
                        <div class="swiper-slide"><img src="img/微信图片_202211181533374.jpg" alt=""></div>
                        <div class="swiper-slide"><img src="img/微信图片_202211181533375.jpg" alt=""></div>
                        <div class="swiper-slide"><img src="img/微信图片_202211181533376.jpg" alt=""></div>
                        <div class="swiper-slide"><img src="img/微信图片_202211181533377.jpg" alt=""></div>
                        <div class="swiper-slide"><img src="img/微信图片_202211181533378.jpg" alt=""></div>
                        <div class="swiper-slide"><img src="img/微信图片_202211181533376.jpg" alt=""></div>
                        <div class="swiper-slide"><img src="img/微信图片_202211181533377.jpg" alt=""></div>
                        <div class="swiper-slide"><img src="img/微信图片_202211181533378.jpg" alt=""></div>
                    </div>
                    <!-- Add Pagination -->
                </div>
            </div>
            <div class="Grace4">
                <ul class="Grace4-1">
                    <li class="Grace4-1-1"><a>友情链接：</a></li>
                    <li class="Grace4-1-2"><a>山东教育局</a></li>
                    <li class="Grace4-1-2"><a>山东教育局</a></li>
                    <li class="Grace4-1-2"><a>山东教育局</a></li>
                    <li class="Grace4-1-2"><a>山东教育局</a></li>
                    <li class="Grace4-1-2"><a>山东教育局</a></li>
                    <li class="Grace4-1-2"><a>山东教育局</a></li>
                    <li class="Grace4-1-2"><a>山东教育局</a></li>
                    <li class="Grace4-1-2"><a>山东教育局</a></li>
                </ul>
            </div>
        </div>
        <div class="bottom">
            <div class="bottom1">
                <div class="bottom1-1"><img src="img/logo.png" alt=""></div>
                <div class="bottom1-2">地址：山东省烟台市高新区海天路1001号&nbsp;&nbsp;办公室电话：0535-293876</div>
                <div class="bottom1-3"><img src="img/50.png" alt=""></div>
                <div class="bottom1-4"></div>
            </div>
            <div class="bottom2">
                <div>Copyright</div>
            </div>
        </div>
    </div>
    <!-- Swiper -->

    <!-- Swiper JS -->
    <script src="../dist/js/swiper.min.js"></script>

    <!-- Initialize Swiper -->
    <script>
        var swiper = new Swiper('.swiper-container', {
            pagination: '.swiper-pagination',
            paginationClickable: true
        });
    </script>
    <script>
        var swiper = new Swiper('.swiper-container');
    </script>
    <script>
        var swiper = new Swiper('.swiper-container', {
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev',
            pagination: '.swiper-pagination',
            paginationType: 'fraction'
        });
    </script>
     <script src="../dist/js/swiper.min.js"></script>

     <!-- Initialize Swiper -->
     <script>
     var swiper = new Swiper('.swiper-container1', {
         slidesPerView: 3,
         centeredSlides: false,
         paginationClickable: true,
         spaceBetween: 20
     });
     </script>
</body>

</html>